<template>
  <!-- 包含轮播图的容器，动态设置样式 -->
  <div :style="containerStyle">
    <!-- Element UI 的 Carousel 组件，点击触发轮播，设置高度 -->
    <el-carousel trigger="click" :height="carouselHeight">
      <!-- 遍历数据数组，生成 Carousel 项 -->
      <el-carousel-item v-for="item in zhuzi" :key="item">
        <!-- 显示图片 -->
<!--        <el-image class="image" :src="item.url" fit=""/>-->
        <div class="layout-container">
          <div class="left-section">
<!--            <img :src="imageSrc" alt="Image Description">-->
            <el-image class="image" :src="item.url" fit=""/>
          </div>
          <div class="right-section">
            <h2>{{ item.title }}</h2>
            <h3>{{ item.subtitle }}</h3>
            <p>{{ item.content }}</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'Carousel', // 组件名
  props: {
    data: {
      type: Array, // 传入的数据类型为数组
      required: true // 必须传入
    }
  },
  data() {
    return {
      carouselHeight: '400px' // 默认的轮播图高度
      , zhuzi: [
        {
          title:"孙武",
          subtitle:"春秋时期著名的军事家",
          content: "孙武，字长卿，齐国乐安人，春秋时期著名的军事家、政治家，尊称兵圣。后人尊称其为孙子、孙武子、百世兵家之师、东方兵学的鼻祖。由齐至吴，经吴国重臣伍员举荐，向吴王阖闾进呈所著兵法十三篇，受到重用为将。他曾率领吴国军队大败楚国军队，占领楚国都城郢城，几近覆亡楚国。其著有巨作《孙子兵法》十三篇，为后世兵法家所推崇，被誉为\"兵学圣典\"，置于《武经七书》之首。被译为英文、法文、德文、日文，该书成为国际间最著名的兵学典范之书。",
          url: "https://img11.iqilu.com/21/2023/12/25/44accf86becf0e2f6c739db44734017c.jpg"
        },
        {
          title:"鲁班",
          subtitle:"春秋战国时期著名发明家",
          content: "鲁班，姓公输，名般。又称公输子、公输盘、班输、鲁般。鲁国人（都城山东曲阜，故里山东滕州），“般”和“班”同音，古时通用，故人们常称他为鲁班。 大约生于周敬王十三年（公元前507年），卒于周贞定王二十五年（公元前444年），生活在春秋末期到战国初期，出身于世代工匠的家庭，从小就跟随家里人参加过许多土木建筑工程劳动，逐渐掌握了生产劳动的技能，积累了丰富的实践经验。 鲁班是我国古代的一位出色的发明家，两千多年以来，他的名字和有关他的故事，一直在广大人民群众中流传。我国的土木工匠们都尊称他为祖师。",
          url: "https://img11.iqilu.com/21/2023/12/25/4b48a3430aa19faa14f015361279d7f0.jpg"
        },
        {
          title:"墨子",
          subtitle:"墨子是战国著名思想家",
          content: "墨子是战国著名思想家、政治家。春秋末战国初期鲁国人，生卒年约为前468年—前376年。他提出了“兼爱”、“非攻”、“尚贤”、“尚同”、“天志”、“明鬼”、“非命”、“非乐”、“节葬”、“节用”、“交相利”等观点，创立墨家学说，并有《墨子》一书传世。",
          url: "https://img11.iqilu.com/21/2023/12/25/80874a1063409ac756eff0d21eeb4770.jpg"
        },
        {
          title:"孙膑",
          subtitle:"中国战国时期军事家",
          content: "孙膑，其本名孙伯灵，是中国战国时期军事家，华夏族。出生于阿、鄄之间（今山东省菏泽市鄄城县北），是孙武的后代。孙膑曾与庞涓为同窗，因受庞涓迫害遭受膑刑，身体残疾，后在齐国使者的帮助下投奔齐国，被齐威王任命为军师，辅佐齐国大将田忌两次击败庞涓，取得了桂陵之战和马陵之战的胜利，奠定了齐国的霸业。唐德宗时将孙膑等历史上六十四位武功卓著的名将供奉于武成王庙内，被称为武成王庙六十四将。宋徽宗时追尊孙膑为武清伯，位列宋武庙七十二将之一。",
          url: "https://img11.iqilu.com/21/2023/12/25/8f5dac7a7dacf98c321b0849a2eeb996.jpg"
        }
      ]
    };
  },
  computed: {
    // 动态计算容器的样式
    containerStyle() {
      return {
        width: '100%' // 容器宽度为 100%
      };
    }
  },
  mounted() {
    // 组件挂载后更新高度，并监听窗口大小变化事件
    this.updateHeight();
    window.addEventListener('resize', this.updateHeight);
  },
  beforeUnmount() {
    // 组件卸载前移除窗口大小变化事件监听
    window.removeEventListener('resize', this.updateHeight);
  },
  methods: {
    // 更新轮播图高度的方法
    updateHeight() {
      const w = window.innerWidth; // 获取窗口宽度
      let h = 270; // 默认高度
      if (w > 1180) {
        h = 400; // 如果窗口宽度大于 1180，设置高度为 400
      } else {
        h = 0.22 * w; // 否则按比例设置高度
      }
      this.carouselHeight = h + 'px'; // 更新轮播图高度
    }
  }
};
</script>

<style scoped>
/* 图片样式，宽度为 100% */
.image {
  width: 80%;
}

/* 轮播图容器样式，高度自动 */
.el-carousel__container {
  height: auto;
}

/* 块元素样式 */
.block {
  box-sizing: border-box;
  vertical-align: top;
}

/* 最后一个块元素样式，去掉右边框 */
.block:last-child {
  border-right: none;
}

/* 示例文本样式 */
.demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}


.layout-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #f5f5f5;
}

.left-section img {
  max-width: 300px;
  max-height: 400px;
  margin-right: 20px;
}

.right-section {
  max-width: 600px;
  background-color: #533F31;
  color: #F4DDBB;
  padding: 10px;
  height: 270px;
  border-radius: 10px;
}

.right-section h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #FFFFFF;
}

.right-section h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #FFFFFF;
}

.right-section p {
  font-size: 16px;
  line-height: 1.6;
}
</style>
